<template>
    <div id="quan">
        <div id="tou">
            <div id="aa">
                <span class="fa fa-angle-left" @touchstart="back"></span>
            </div>
            <div id="zz"><input type="text" placeholder="兰蔻"></div>
            <div id="qq"><span class="fa fa-list-ul"></span></div>
            <div id="ww">···</div>
        </div>
        <div id="ti">
            <ul id="wu">
                <li><a href="">综合</a></li>
                <li><a href="">销量</a></li>
                <li><a href="">新品</a></li>
                <li><span id="wan" @click="shangxia">价格</span>
                    <div id="sx"><span class="fa fa-caret-up" id="shang"></span><span class="fa fa-caret-down" id="xia"></span></div>
                </li>
                <li><a href="">筛选 <span class="fa fa-caret-down"></span></a></li>
            </ul>
        </div>
        <div id="zhengti">
            <div id="lei">
                <ul id="san">
                    <li><a href="">分类 <span class="fa fa-caret-down"></span></a></li>
                    <li><a href="">适合肤质 <span class="fa fa-caret-down"></span></a></li>
                    <li><a href="">功效 <span class="fa fa-caret-down"></span></a></li>
                </ul>
            </div>
            <div class="mose" v-if="!isshow">
                <div v-for="m in data1" class="dis">
                    <router-link :to="'/user/find/gooddetail/'+m._id" class="box">
                        <div>
                            <img :src="'/avatar/'+m.pics[0]">
                        </div>
                        <div id="nei">
                            <p id="q1">{{m.name}}</p>
                            <p id="q2">私人订制，你值得拥有</p>
                            <p id="q3">￥{{m.price}}</p>
                        </div>
                    </router-link>
                </div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
            <div id="meiyou" v-if="isshow">
                <img src="/static/2.png" alt="">
                <p>没有找到相关商品</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                data1: [],
                shopname: "",
                isshow: true,
                isdian: false,
                size: 1
            }
        },
        methods: {
            back: function () {
                history.back();
            },
            shangxia: function () {
                // console.log(123)
                this.isdian = !this.isdian;
                var xia = document.getElementById("xia");
                var shang = document.getElementById("shang");
                if (this.isdian) {
                    this.size = -1;
                    shang.style.color = "red";
                    xia.style.color = "#666";
                    var params = {
                        shopname: this.str,
                        size: this.size
                    }
                    this.$store.dispatch("requestSearch", params)
                        .then(res => {
                            if (res.data.data.length > 0) {
                                this.isshow = false;
                            } else {
                                this.isshow = true;
                            }
                            this.data1 = res.data.data;
                        });
                } else {
                    this.size = 1;
                    shang.style.color = "#666";
                    xia.style.color = "red";
                    var params = {
                        shopname: this.str,
                        size: this.size
                    }
                    this.$store.dispatch("requestSearch", params)
                        .then(res => {

                            if (res.data.data.length > 0) {
                                this.isshow = false;

                            } else {
                                this.isshow = true;

                            }
                            this.data1 = res.data.data;
                        });
                }
            }
        },
        computed: {
            str: function () {
                return this.$route.params.str
            }
        },
        mounted: function () {
            // var xia = document.getElementById("xia");
            // xia.style.color = "red";
            var params = {
                shopname: this.str,
                size: this.size
            }
            this.$store.dispatch("requestSearch", params)
                .then(res => {
                    if (res.data.data.length > 0) {
                        this.isshow = false;
                    } else {
                        this.isshow = true;
                    }
                    this.data1 = res.data.data;
                });
        },
    }

</script>

<style scoped>
    #quan {
        height: 100vh;
        background-color: #eee;
    }

    #zhengti {
        height: 80vh;
        overflow-y: scroll;
    }

    #tou {
        display: flex;
        height: 8vh;
        width: 100vw;
        background-color: white;
    }

    #aa {
        width: 10vh;
        height: 8vh;
        font-size: 8vh;
        text-align: center;
        line-height: 8vh;
        color: #999;
    }

    #zz {
        line-height: 8vh;
    }

    #zz input {
        width: 60vw;
        margin: 0 5px;
        height: 5.5vh;
        background-color: #eee;
        border: none;
        border-radius: 5px;
    }

    #qq {
        width: 8vh;
        height: 8vh;
        font-size: 4.5vh;
        text-align: center;
        line-height: 8vh;
        color: #999;
    }

    #ww {
        width: 8vh;
        height: 8vh;
        font-size: 8vh;
        text-align: center;
        line-height: 8vh;
        color: #999;
    }

    #ti {
        width: 100vw;
        height: 12vw;
        background-color: rgb(250, 250, 250);
        border: solid 1px rgb(245, 245, 245);
    }

    #wu {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        justify-content: space-around;
        line-height: 12vw;
        font-size: 14px;
    }

    #wu li a {
        color: #666;
    }

    #wu li:nth-of-type(1) a {
        color: red;
    }

    #sx {
        display: inline-block;
        position: relative;
    }

    #sx span {
        margin-left: 5px;
        position: absolute;
        color: #999;
    }

    #sx span:nth-of-type(1) {
        top: -15px;
    }

    #sx span:nth-of-type(2) {
        top: -8px;
    }

    #san {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-around;
    }

    #san li {
        list-style: none;
        width: 28vw;
        height: 10vw;
        text-align: center;
        line-height: 10vw;
        font-size: 14px;
        background-color: white;
        margin: 10px 0;
    }

    #san li a {
        color: #666;
    }

    #meiyou {
        width: 100vw;
        height: 70vw;
        text-align: center;
    }

    #meiyou img {
        margin-top: 15px;
        width: 46vw;
        height: 46vw;
    }

    .mose {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .dis {
        width: 46vw;
        /*border: solid 1px black;*/
        text-align: center;
        background-color: white;
        margin: 5px 0;
        padding: 5px 0;
    }

    .box img {
        width: 46vw;
        height: 46vw;
    }

    #nei p {
        margin: 0;
        text-align: left;
        margin-left: 10px;
    }

    #nei p:nth-of-type(1) {
        color: black;
        font-size: 14px;
        font-weight: 900;
    }

    #nei p:nth-of-type(2) {
        color: black;
        font-size: 14px;
    }

    #nei p:nth-of-type(3) {
        color: red;
        margin-top: 10px;
        font-size: 13px;
        font-weight: 500;
    }

    #wan {
        color: #666;
    }
</style>